<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-14 20:02:11
 * @LastEditors: your name
 * @LastEditTime: 2021-07-19 16:48:01
 * @Description: file content
-->
<template>
  <van-field
    readonly
    clickable
    :label="instance.__config.label"
    :value="value"
    :placeholder="instance.__config.placeholder"
    right-icon="clock-o"
    @click="handleClick"
  ></van-field>
</template>

<script>
// timeType
// <el-option label="时:分" :value="1"> </el-option> 
// <el-option label="时:分:秒" :value="2"> </el-option>

// timefilter
// <el-option label="不限制" :value="1"> </el-option>
// <el-option label="5分钟为单位" :value="5"> </el-option>
// <el-option label="15分钟为单位" :value="15"> </el-option>
// <el-option label="30分钟为单位" :value="30"> </el-option>
import { widgetMixin } from "../mixin";
import DateTime from "@/components/dateTime/instance";

const formatMap = {
  1: 'HH:mm',
  2: 'HH:mm:ss',
}

export default {
  mixins: [widgetMixin],
  
  data() {
    return {
      value: undefined
    };
  },

  watch: {
    values: {
      handler: "handleValuesChange",
      immediate: true,
      deep: true,
    },
  },

  computed: {
    format() {
      // 日期格式
      const { timeType } = this.instance.__config;
      return formatMap[timeType];
    },
  },

  methods:{
    handleValuesChange(values) {
      this.value = values[this.field];
    },

    handleValueChange(value) {
      this.valueCallback(this.field, value);
    },

    handleClick() {
      const { value, format } = this;
      DateTime.init({
        value,
        format,
        // max,
        // min,
        // precision,
        // onChange: (value) => {
        //   console.log("onChange", value);
        //   this.value = value;
        // },
        onConfirm: (data) => {
          this.valueCallback(this.field, data);
        }
      });
    },
  }
};
</script>

<style>

</style>